<style lang="scss" scoped>
    @import './custom-screening.scss';
    .ui-screening{
        width:100%;
        padding:7px 5px 5px;
        .main{
            overflow: hidden;
        }
        .footer{
            margin-top:5px;
            padding-top:8px\9\0; /*兼容 IE10*/
            justify-content:center;
            border-top:1px dashed #ddd;
            text-align:center;
            .button{
                padding:7px 10px;
                font-size:12px;
                // 按钮图标动画
                /*&:hover{
                    .icon:not(.chevron){
                        animation:icon-animate 2s linear infinite;
                    }
                }
                &:active{
                    .icon:not(.chevron){
                        animation:icon-animate .2s linear infinite;
                    }
                }*/
            }
        }
    }
    .el-input--small .el-input__inner{
        height:20px !important;
    }
    @keyframes icon-animate{
        from{
            transform:rotateZ(0);
        }
        to{
            transform:rotateZ(360deg);
        }
    }
</style>
<template>
    <div class="ui-screening">
        <div class="main" :style="{height:height, transitionDuration:transition+'ms'}" ref="main">
            <div ref="content">
                <slot></slot>
            </div>
        </div>
        <ui-screening-row class="footer" v-if="$listeners.search || $listeners.reset">
            <button class="ui button primary" v-if="$listeners.search" @click="search">
                <i class="search icon"></i>
                查询
            </button>
            <button class="ui button basic" v-if="$listeners.reset" @click="reset">
                <i class="history icon"></i>
                重置
            </button>
            <!--折叠按钮-->
            <button class="ui button basic" v-if="showFoldBtn" @click="toggleFold">
                <i class="chevron icon m-0" :class="isFold?'down':'up'"></i>
            </button>
        </ui-screening-row>
    </div>
</template>
<script>
    export default {
        name: 'ui-screening',
        props: {
            value: {//搜索参数
                type: Object,
                default: function(){
                    return {}
                }
            },
            transition: {
                default: 300
            },
            labelWidth: {//外壳只接参数,screening-row组件会从这里获取
                type: String,
                default: '100px'
            },
            foldHeight: {
                type:String,
            },
            foldDefault: {
                type:Boolean,
                default: true
            },
            // 是否显示折叠按钮
            showFoldBtn : {
                type : Boolean,
                default : false
            }

        },
        data() {
            return {
                isFold: this.foldDefault, //是否折叠
                historyData: Object.assign({}, this.value),//历史搜索参数,用于重置
                height:'',
                overflow:''
            }
        },
        methods: {
            toggleFold() {
                this.isFold = !this.isFold
                this._updateHeight()
                this.$emit('fold', this.isFold)
            },
            _updateHeight(){
                // 折叠 && 并且显示折叠按钮，避免未设置showFoldBtn的地方也未展开
                if (this.isFold && this.showFoldBtn) {
                    // 收起
                    this.height = this.foldHeight || '0px'
                }else{
                    // 展开
                    this.height = this.getHeightByRef('content')
                }
            },
            search() {
                if (typeof this.value.pageNumber === 'number') {
                    this.value.pageNumber = 1 //将外部分页重置
                }
                this.$emit('search', this.value) //回传给@search
            },
            reset() {
                let resetData = Object.assign({}, this.historyData)
                this.$emit('input', resetData) //回传给 searchData (外部的v-model="searchData")

                // 广播事件
                this.$eventHub.$emit('ui-screening:reset', true)

                this.$nextTick(() => {
                    this.$emit('reset', this.value) //回传给@reset
                })
            },

            getHeightByRef(ref) {
                return this.$refs[ref].offsetHeight + 'px'
            }
        },
        mounted(){
            this.$nextTick(() => {
                this._updateHeight()
                // style初始化高度, 才能触发css动画
                setTimeout(()=>{
                    if (this.height === '') {
                        this.height = this.getHeightByRef('main')
                    }
                })
            })
        },
    }
</script>
